<template>
  <view class="custom">
        <view class="clockin d-flex a-center j-center" v-if="type==='3'">
            <view class="card d-flex d-r a-center j-center" :class="[bgClass]">
                <image class="icon" :src="iconUrl" mode="" />
                <text class="text">
                    {{senderName}}完成了
                </text>
                <text class="text uline" :class="[textClass]" @tap="goClockinRecord">{{clockTypes[extension.type]}}</text>
            </view>
        </view>


        <view class="clockin d-flex a-center j-center" v-if="type==='4'">
            <view class="psr card1" :class="[bgClass]">
                <image class="icon" :style="{top:`${iconTop}rpx`,left:`${iconLeft}rpx`}" src="/static/nvue/laba.png" mode="" />
                <text class="text">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    {{extension.users}}
                    「加入了{{clocksetedTypes[extension.type]}}」
                </text>
            </view>
        </view>


        <view class="clockin d-flex a-center j-center" v-if="type==='6'">
            <view class="psr card1 bg1">
                <image class="icon" :style="{top:`${iconTop}rpx`,left:`${iconLeft}rpx`}" src="/static/nvue/laba.png" mode="" />
                <text class="text">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    公告:{{extension.notification}}
                </text>
            </view>
        </view>
  </view>
</template>

<script lang="ts" setup>
import { watchEffect,ref,computed, reactive, toRefs } from 'vue';
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { imStore } from "@/store/imStore";
const systemConfig: any = systemConfigStore();
const IM_STORE = imStore();

const jiaobiaoText = computed(() => {
    let str = "";
    systemConfig.groupTag.forEach((item) => {
        if (item.slimKey === extension.value.label) {
            str = item.slimValue;
        }
    });
    return str;
});

const iconTop =ref(uni.platform==='ios'?22:16);
const iconLeft =ref(uni.platform==='ios'?20:26);


const clockTypes = ref({
    1:"早餐打卡",
    2:"午餐打卡",
    3:"晚餐打卡",
    4:"加餐打卡",
    5:"喝水打卡",
    6:"运动打卡",
    7:"体重打卡",
});
const clocksetedTypes = ref({
    1:"饮食打卡",
    2:"体重打卡",
    3:"运动打卡",
});

const bgClass = computed(() => {
    return `bg${extension.value.type}`
});

const textClass = computed(() => {
    return `text${extension.value.type}`
});

const iconUrl = computed(() => {

    if(extension.value.type==1){
        return '/static/im/zaocan.png'
    }
    if(extension.value.type==2){
        return '/static/im/wucan.png'
    }
    if(extension.value.type==3){
        return '/static/im/wancan.png'
    }
    if(extension.value.type==4){
        return '/static/im/jiacan.png'
    }
    if(extension.value.type==5){
        return '/static/im/heshui.png'
    }
    if(extension.value.type==6){
        return '/static/im/yundong.png'
    }
    if(extension.value.type==7){
        return '/static/im/tizhong.png'
    }

});

const colckinsetediconUrl = computed(() => {
    if(extension.value.type==1){
        return '/static/im/zaocan.png'
    }
    if(extension.value.type==2){
        return '/static/im/tizhong.png'
    }
     if(extension.value.type==3){
        return '/static/im/yundong.png'
    }
});



const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    messageData: {
			type: Object,
			default: () => {
			  return {};
			}
	}
});


const type = ref('');
const extension = ref({});
const payload = ref({});
const message = ref({});

const senderName = computed(()=>{
            
            let remark = null;

            IM_STORE.friends.forEach((f:any)=>{
                if(f.userID===message.value.from){
                    remark = f.remark;
                }
            })

            return remark||message.value.nameCard || message.value.nick
})

const goClockinRecord = () => {
    const groupId = IM_STORE.conversation?.groupProfile?.groupID;
    const userId = message.value.from;

    if(!groupId){
        return;
    }
    uni.navigateTo({
        url: `/pages/clockinRecord/clockinRecord?groupId=${groupId}&userId=${userId}`,
    });
};


const goClockinState = () => {
    const groupId = extension.value.groupId
    const type = extension.value.type

    if(!groupId){
        return;
    }
    uni.navigateTo({
        url: `/pages/clockinState/clockinState?groupId=${groupId}&type=${type}`,
    });
};

watchEffect(()=>{


    message.value = props.data.message;
    payload.value =props?.data?.message?.payload;
    type.value = props?.data?.message?.payload?.data;


    try {
        extension.value = JSON.parse(props?.data?.message.payload?.extension);
    } catch (error) {
        
    }

    //   data.data = props.data;
	// 		data.message = props.messageData;
    //   data.isCustom = props.data.message.payload.data;
    //   data.payload = props.data.message.payload;
    //   if (props.data.message.payload.data === 'consultion') {
    //     data.extension = JSON.parse(props.data.message.payload.extension);
    //   }
});


// const MessageCustom =  defineComponent({
//   props: {
//     data: {
//       type: Object,
//       default: () => {
//         return {};
//       }
//     },
// 		messageData: {
// 			type: Object,
// 			default: () => {
// 			  return {};
// 			}
// 		}
//   },
//   setup(props:any, ctx:any) {
//     const data = reactive({
//       data: {},
//       extension: {},
//       isCustom: '',
//       payload: {},
// 			message: {},
//     });
//     return {
//       ...toRefs(data),
//     };
//   }
// });
//export default MessageCustom
</script>
<style lang="scss" scoped>

.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}

.custom {

    .clockin{
        width:750rpx;
        padding-top: 15px;
        .card{
            padding:0 30rpx;
            border-radius: 25rpx;
            height:50rpx;

            .icon{
                width:30rpx;
                height:30rpx;
                margin-right:5rpx;
            }

            &.bg1{
                background:#CBF1E5;
            }
            &.bg2{
                background:#CBF1E5;
            }
            &.bg3{
                background:#CBF1E5;
            }
            &.bg4{
                background:#CBF1E5;
            }
            &.bg5{
                background:#D5D9F6;
            }
            &.bg6{
                background:#F7E9D0;
            }
            &.bg7{
                background:#E0D4F7;
            }

             .text{
                font-size: 24rpx;
                color: #666;
                font-weight: 400;
                &.uline{
                    text-decoration: underline;
                }
                &.text1{
                    color:#1DC691;
                }
                &.text2{
                    color:#1DC691;
                }
                &.text3{
                    color:#1DC691;
                }
                &.text4{
                    color:#1DC691;
                }
                &.text5{
                    color:#576BFC;
                }
                &.text6{
                    color:#FF7840;
                }
                &.text7{
                    color:#8C52FF;
                }
            }

        }
        .card1{
            padding:20rpx 20rpx;
            border-radius: 25rpx;
            max-width:500rpx;
            line-height:40rpx;



            .icon{
                position:absolute;
                width:30rpx;
                height:30rpx;
            }

            &.bg1{
                background:#CBF1E5;
            }
            &.bg2{
                background:#E0D4F7;
            }
            &.bg3{
                background:#F7E9D0;
            }

             .text{
                max-width:460rpx;
                font-size: 24rpx;
                color: #666;
                font-weight: 400;
                text-overflow: ellipsis;
                white-space: nowrap;
                lines: 10;
                word-wrap:anywhere;
                &.uline{
                    text-decoration: underline;
                }
                &.text1{
                    color:#1DC691;
                }
                &.text2{
                    color:#8C52FF;
                }
                &.text3{
                    color:#FF7840;
                }
            }

        }
    }

}
</style>
